import React, { useState, useEffect } from 'react'
import style from './index.module.scss'
import { Tabs } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import { ImageViewer, NavBar } from 'antd-mobile'
const Index: React.FC = () => {
    const navigate = useNavigate()

    const back = () => {
        // 返回
        navigate(-1)
    }

    const [visible, setVisible] = useState(false)

    const [imgs2, setImgs2] = useState([
        '../../src/img/wjw1.png',
        '../../src/img/wjw2.png',
        '../../src/img/wjw3.png',
        '../../src/img/wjw4.png',
        '../../src/img/wjw5.png'
    ])
    return (
        <div className={style.boxss}>
            <NavBar onBack={back}>好大夫在线</NavBar>
            <div className={style.topimg}>
                <img src="../../src/img/weijian.png" alt="" />
            </div>

            <Tabs
                sticky
                scrollspy={{ autoFocusLast: true, reachBottomThreshold: 50 }}
            >
                {['行业资质', '医生团队', '放心问诊', '数据开放'].map((item, index) => (
                    <Tabs.TabPane key={index} title={item}>

                        <div className={style.height} style={{ marginTop: '50px' }}>
                            {
                                index == 0 ? <div className={style.imgdx}>  <h3>  行业资质</h3>
                                    <p>互联网医院</p>
                                    <p>好大夫在线旗下的银川好大夫互联网医院为国家</p>
                                    <p>卫生健康委员会(原卫生和计划生育委员会)认</p>
                                    <p>证的正规医疗机构，可以提供线上诊疗服务。</p>
                                    <div className={style.tpbox}>
                                        <img onClick={() => {
                                            setVisible(true)
                                        }} src="../../src/img/wjw1.png" alt="" />
                                        <img onClick={() => {
                                            setVisible(true)
                                        }} src="../../src/img/wjw2.png" alt="" />
                                        <ImageViewer.Multi
                                            images={imgs2}
                                            visible={visible}
                                            defaultIndex={1}
                                            onClose={() => {
                                                setVisible(false)
                                            }}
                                        />
                                    </div>
                                    <div>
                                        <h3 style={{ marginTop: '20px' }}>
                                            技术及服务支持</h3>
                                        <p>北京新医强国科技有限公司拥有互联网信息服务</p>
                                        <p>相关资质，为好大夫在线平台提供技术及服务支</p>
                                        <p>持。</p>
                                        <div className={style.tpbox}>
                                            <img onClick={() => {
                                                setVisible(true)
                                            }} src="../../src/img/wjw3.png" alt="" />
                                            <img onClick={() => {
                                                setVisible(true)
                                            }} src="../../src/img/wjw4.png" alt="" />
                                            <img onClick={() => {
                                                setVisible(true)
                                            }} src="../../src/img/wjw5.png" alt="" />
                                            <ImageViewer.Multi
                                                images={imgs2}
                                                visible={visible}
                                                defaultIndex={1}
                                                onClose={() => {
                                                    setVisible(false)
                                                }}
                                            />
                                        </div>
                                    </div>
                                </div> : <div>
                                    {
                                        index == 1 ? <div >
                                            <img className={style.wjwystd} src="../../src/img/wjwystd.png" alt="" />
                                        </div>

                                            : <div>
                                                {
                                                    index == 2 ? <div>
                                                        <img className={style.wjwystd} src="../../src/img/wjwfxwz.png" alt="" />
                                                    </div> : <div>

                                                        <img className={style.wjwystd} src="../../src/img/wjwshuju.png" alt="" />
                                                        <div style={{ color: 'blue', marginTop: '30px', lineHeight: '30px' }}>平台荣获荣誉 <span>&gt;</span></div>
                                                    </div>
                                                }
                                            </div>
                                    }
                                </div>
                            }
                        </div>
                    </Tabs.TabPane>
                ))}
            </Tabs>

        </div>
    )
}

export default Index

